<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>使用 layDate 独立版</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">

  <style>
  body{padding: 20px;}
  .demo-input{padding-left: 10px; height: 38px; min-width: 262px; line-height: 38px; border: 1px solid #e6e6e6;  background-color: #fff;  border-radius: 2px;}
  .demo-footer{padding: 50px 0; color: #999; font-size: 14px;}
  .demo-footer a{padding: 0 5px; color: #01AAED;}

  .select{
    width: 312px;
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid #DDD;
    display: block;
  }

  .select span{
    height: 30px;
    width: 40px;
    display: block;
    float: left;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #DDD;
    box-sizing: border-box;
    margin-right: -1px;
    margin-top: -1px;
    cursor: pointer;
  }

  .SelectWeekBox {
    position: relative;
  }

  .SelectWeekBox .select{
    background: #fdfdfd;
    position: absolute;
    left: 0px;
    top: 9px;
  }


  </style>
</head>
<body>
<input type="text" class="demo-input" placeholder="请选择年份" id="SelectYear">

<span id="SelectWeekBox" class="SelectWeekBox">
  <input type="text" class="demo-input" placeholder="请选择周" id="SelectWeek">
  <span class="select"></span>
</span>





<script src="js/jquery-1.10.2.js"></script> 

<script src="laydate/laydate.js"></script> 

<script>

// 满足鼠标移动到周上，显示开始时间和结束时间
// 满足可以设置周的开始时间


laydate.render({
  elem: '#SelectYear'
  ,type: 'year'
  ,done:function(date){
      var NumOfWeeks = getNumOfWeeks(date);
      var spanDom ="";

      for(var i = 1;i<=NumOfWeeks;i++){
        spanDom +='<span title="2011-11-12到2011-12-13">'+(i<=9?'0'+i:i)+'周</span>';
      }

      $('.select').children().remove();
      $('.select').html(spanDom);


       $('.select span').on('click',function(event) {
         /* Act on the event */
         $("#SelectWeek").val($(this).text());
         var d=new Date(date,0,1).getDay()
         var addDay = null;
         var end = null;
         var firstWeekStart = new Date(date,0,1)
         if(d == '0'){
         	end = 1;
         }else{
         	end = 1+(7-d);
         }
         var firstWeekEnd = new Date(date,0,end);
        	var week  =  $(this).text().substring(0,2);
        	var chooseWeek = null;
        	if(week.substr(0,1) == 0){
        		chooseWeek = week.substr(1,2)
        	}else{
        		chooseWeek = week
        	}
        	var chooseWeekStar = null;
        	var chooseWeekEnd = null;
        	if(chooseWeek == 1){
        		chooseWeekStar = firstWeekStart;
        		chooseWeekEnd = firstWeekEnd;
        	}else if(chooseWeek == NumOfWeeks){
        		chooseWeekStar = new Date(date,0,(chooseWeek-1)*7+1)
        		var yt=( ( date%4==0 && date%100!=0) || date%400==0)?366:365; 
        		chooseWeekEnd = new Date(date,0,yt)
        	}else{
        		chooseWeekStar = new Date(date,0,(chooseWeek-1)*7+1);
        		chooseWeekEnd = new Date(date,0,(chooseWeek-1)*7+end)
        	}
        	var startYear = chooseWeekStar.getFullYear();
        	var startMonth = chooseWeekStar.getMonth()+1;
        	var startDay = chooseWeekStar.getDate();
        	chooseWeekStar = getTime(startYear,startMonth,startDay)
        	var endYear = chooseWeekEnd.getFullYear();
        	var endMonth = chooseWeekEnd.getMonth()+1;
        	var endDay = chooseWeekEnd.getDate();
        	chooseWeekEnd = getTime(endYear,endMonth,endDay)
        	console.log(""+date+"年第"+chooseWeek+"周开始时间:"+chooseWeekStar+" ,结束时间:"+chooseWeekEnd)

       });

  }
});

function getTime(year,month,day){
	return year+"-"+changeLength(month)+"-"+changeLength(day);
}
function changeLength(time){
	if((""+time).length == 1){
		return "0"+time;
	}else{
		return time;
	}
}
function getNumOfWeeks(year){
  var d=new Date(year,0,1).getDay()

var yt=( ( year%4==0 && year%100!=0) || year%400==0)?366:365; 
var myweek = null;
var pengpengweek = null;
var myday = null;
if(d == '0'){
	myday = yt-1;
}else(
	myday = yt-(8-d)
)
myweek = Math.ceil(myday/7.0)+1;
return myweek;
}



 
// document.write("2017年有"+getNumOfWeeks(2017)+"周");

// var NumOfWeeks = getNumOfWeeks(2017);






// console.log(spanDom);



</script>
</body>
</html>